<template>
  <div class="generalize">
    <div class="seach_box">
      <input
        type="text"
        class="seach_input"
        v-model="seachNum"
        placeholder="请输入公交车线路"
      >
      <div
        @click="handSeach()"
        class="seach_sub pointer"
      >
        立即查询
      </div>
    </div>
    <div v-if="pathList.length!=0">
      <div class="path_top">
        {{pathList[0].lineName}}({{pathList[0].stationLast}}——{{pathList[0].stationFirst}}）
      </div>
      <div class="path_top_dateils">
        <span>首班：{{pathList[0].firstTime}}</span> <span style="margin: 0 60px;">末班：{{pathList[0].lastTime}}</span> <span>发车时间间隔6分钟</span>
      </div>
      <div class="path_luxian">
        <table
          border="1"
          style="width: 50%"
          v-if="pathList[0]&&pathList[0].trStationInfoAll.length!=0"
        >
          <thead>
            <tr>
              <th colspan="2">
                上行
              </th>
            </tr>
            <tr>
              <th>序号</th>
              <th>站名</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in pathList[0].trStationInfoAll">
              <td>{{index+1}}</td>
              <td>{{item.stationName}}</td>
            </tr>
          </tbody>
        </table>
        <table
          border="1"
          style="width: 50%"
          v-if="pathList[1]&&pathList[1].trStationInfoAll.length!=0"
        >
          <thead>
            <tr>
              <th colspan="2">
                下行
              </th>
            </tr>
            <tr>
              <th>序号</th>
              <th>站名</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in pathList[1].trStationInfoAll">
              <td>{{index+1}}</td>
              <td>{{item.stationName}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <p
      v-if="pathList.length==0"
      class="no_data"
    >暂无数据!</p>
  </div>
</template>

<script>
export default {
  name: "generalize.vue",

  data() {
    return {
      seachNum: "",
      pathList: [],
      title: "",
      titleF: "",
      titleL: ""
    };
  },
  mounted() {
    console.log(this.$route.query.seachName, "a");
    if (this.$route.query.seachName) {
      this.handSeach(this.$route.query.seachName);
    }
  },
  methods: {
    handSeach(name) {
      this.seachNum = name == undefined ? this.seachNum : name;
      console.log(name);
      if (this.seachNum != "") {
        this.seachNum =
          this.seachNum.indexOf("路") != -1
            ? this.seachNum
            : this.seachNum + "路";
        console.log(this.seachNum);
        this.$api.getSeach({ line: this.seachNum }).then(res => {
          this.pathList = res.data.data;
          console.log(this.pathList, "搜索", this.seachNum);
        });
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.path_luxian {
  width: 855px;
  display: flex;
}
.path_top_dateils {
  line-height: 46px;
  text-align: center;
  width: 855px;
  height: 46px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  border-top: 0;
  border-bottom: 0;
}
.path_top {
  line-height: 60px;
  text-align: center;
  width: 855px;
  height: 60px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
}
table {
  th {
    padding: 12px;
    border: 1px solid rgba(204, 204, 204, 1);
    text-align: center;
  }
  td {
    padding: 12px;
    border: 1px solid rgba(204, 204, 204, 1);
    color: #333;
    text-align: center;
  }
}
.no_data {
  color: #333333;
  font-size: 18px;
  text-align: center;
  margin-top: 14px;
}
.seach_box {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  .seach_input {
    padding-left: 10px;
    width: 702px;
    height: 42px;
    background: rgba(248, 248, 248, 1);
    border: 1px solid rgba(204, 204, 204, 1);
    box-shadow: 0px 3px 6px rgba(1, 100, 248, 0.16);
    margin-right: 15px;
    font-size: 18px;
    color: #333333;
  }
  .seach_sub {
    width: 137px;
    height: 35px;
    background: rgba(230, 20, 47, 1);
    border-radius: 3px;
    text-align: center;
    line-height: 35px;
    font-size: 17px;
    color: #ffffff;
  }
}
</style>
